<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>防抖动的例子</title>
		<script src="../../js/lib/lodash-v4.17.4/lodash.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<p>拖拽浏览器，改变大小，只有最后停止才会触发</p>
		<a href="http://www.css88.com/archives/7010#more-7010">实例解析防抖动（Debouncing）和节流阀（Throttling）</a>
		<div><span>浏览器可视区域宽度：</span><span id="width"></span></div>
		<div><span>浏览器可视区域高度：</span><span id="height"></span></div>
		<div><span>resize事件触发次数：</span><span id="time"></span></div>
		<script type="text/javascript">
			var w = document.getElementById('width');
			var h = document.getElementById('height');
			var t = document.getElementById('time');
			var time = 0;

			function setValue() {
				w.innerText = window.innerWidth;
				h.innerText = window.innerHeight;
				t.innerText = time++;

			}
			var deb = _.debounce(setValue, 250, true);
			window.onresize = deb;
			setValue();
		</script>
	</body>

</html>